<template>
	<view class="container">
		<view class="image-container">
			<view class="circle-mask">
				<image 
					v-if="iconFilePath" 
					:src="iconFilePath" 
					mode="aspectFill" 
					class="preview-image" 
					@click="previewImage">
				</image>
				<view v-else class="placeholder">
					<text class="placeholder-icon">🖼️</text>
					<text class="placeholder-text">暂无图片</text>
				</view>
			</view>
		</view>
		
		<view class="button-group">
			<button @click="chooseImage" class="btn btn-primary">
				<text class="btn-icon">📷</text>
				<text class="btn-text">选择图片</text>
			</button>
			<button @click="previewImage" class="btn btn-secondary" :disabled="!iconFilePath">
				<text class="btn-icon">👁️</text>
				<text class="btn-text">预览图片</text>
			</button>
			<button @click="getImageInfo" class="btn btn-info" :disabled="!iconFilePath">
				<text class="btn-icon">ℹ️</text>
				<text class="btn-text">图片信息</text>
			</button>
		</view>
		
		<view class="tips">
			<text class="tip-text">提示：支持选择相册或拍照上传图片</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath: "/static/logo.png",
				imageList: []
			}
		},
		onLoad() {
			if (this.iconFilePath) {
				this.imageList = [this.iconFilePath];
			}
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.iconFilePath = res.tempFilePaths[0];
						this.imageList = res.tempFilePaths;
						uni.showToast({
							title: '选择成功',
							icon: 'success',
							duration: 1500
						});
					},
					fail: (err) => {
						console.log('选择图片失败', err);
						uni.showToast({
							title: '选择失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			previewImage() {
				if (!this.iconFilePath) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.previewImage({
					urls: this.imageList,
					current: 0,
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.log('预览失败', err);
						uni.showToast({
							title: '预览失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getImageInfo() {
				if (!this.iconFilePath) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.getImageInfo({
					src: this.iconFilePath,
					success: (res) => {
						uni.showModal({
							title: '图片信息',
							content: `宽度: ${res.width}px\n高度: ${res.height}px\n路径: ${res.path}`,
							showCancel: false,
							confirmText: '知道了'
						});
					},
					fail: (err) => {
						console.log('获取图片信息失败', err);
						uni.showToast({
							title: '获取信息失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 40rpx;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.image-container {
		width: 400rpx;
		height: 400rpx;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.circle-mask {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.2);
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.preview-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		transition: all 0.3s ease;
	}
	
	.preview-image:active {
		transform: scale(0.95);
		opacity: 0.9;
	}
	
	.placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		color: white;
	}
	
	.placeholder-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.placeholder-text {
		font-size: 28rpx;
		color: white;
	}
	
	.button-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		margin-bottom: 50rpx;
	}
	
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: 50rpx;
		padding: 28rpx;
		font-size: 32rpx;
		transition: all 0.2s ease;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.btn:active {
		transform: translateY(4rpx);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.btn-primary {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		color: white;
	}
	
	.btn-secondary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
	}
	
	.btn-info {
		background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
		color: #333;
	}
	
	.btn:disabled {
		background: #f0f0f0;
		color: #cccccc;
		box-shadow: none;
		transform: none;
	}
	
	.btn-icon {
		margin-right: 20rpx;
		font-size: 36rpx;
	}
	
	.btn-text {
		font-weight: 500;
	}
	
	.tips {
		width: 100%;
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 25rpx;
		text-align: center;
	}
	
	.tip-text {
		font-size: 26rpx;
		color: #888;
	}
	.circle-mask::before {
		content: '';
		position: absolute;
		top: -4rpx;
		left: -4rpx;
		right: -4rpx;
		bottom: -4rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		z-index: -1;
		opacity: 0.7;
	}
</style>